import react from 'react'
import './index.css'
export default class Tab extends react.Component<NavProps> {
  // 定义数据
  state: Readonly<NavProps>
  constructor(props: NavProps) {
    super(props)
    // 拿到数据
    this.state = {
      navList: props.navList,
      navId: 0,
      clientWidth: 100,
      children: props.children,
      color: props.color ? props.color : '#fff',
      fontSize: props.fontSize ? props.fontSize : '16px',
      backgroundColor: props.backgroundColor ? props.backgroundColor : '#000',
      borderColor: props.borderColor ? props.borderColor : 'red',
      action: props.action ? props.action : false,
      fixed: props.fixed ? props.fixed : false,
      animation: props.animation,
      count: props.count

    }


  }
  render(): react.ReactNode {
    const { navId, clientWidth, borderColor, action, clientHeight, backgroundColor, fixed, animation, tebClientHeight,windowHeight } = this.state
    return (
      // 整体
      <div >
        <div style={{ height: clientHeight + 'px', display: fixed ? 'block' : 'none' }}></div>
        <div
          className='nav'
          style={
            {
              backgroundColor,
              position: fixed ? 'fixed' : 'relative',
              width: '100%',
              top: 0,
              zIndex: fixed ? 999 : 0
            }
          }>
          {/* 导航栏 */}
          {this.getNav()}
          {/* 下划线 */}
          <div
            className='bottonNav'
            style={{
              width: `${clientWidth + 'px'}`,
              left: `${Number(navId) * Number(clientWidth) + 'px'}`,
              height: action ? clientHeight + 'px' : '3px',
              backgroundColor: borderColor,
              zIndex: action ? '0' : '0'
            }}
          ></div>
        </div>
        {/* 输出的内容 */}
        {
          animation ?
            <div style={{ width: '100%', overflow: 'hidden', height: tebClientHeight as number > Number(windowHeight) ?  tebClientHeight+ 'px':windowHeight+'px' }}>
              <div style={{ left: `-${Number(navId) * 100}%`, width: '100%', transition: 'all .5s', display: 'flex', alignItems: 'flex-start', position: 'relative' }}>{this.getChildren()}</div>
            </div>
            :
            <div>
              {this.getChildren()}
            </div>
        }

      </div>

    )
  }
  // 组件挂载完毕生命周期
  componentDidMount(): void {

    this.getNavId(0)
    this.screenChange();
  }
  // 拿到导航栏
  getNav(): react.ReactNode {
    const { navList, color, fontSize, action, navId, count } = this.state
    return navList.map((val, index) => {
      return (<div id={count} style={
        {
          color,
          fontSize,
          zIndex: action && navId === val.id ? '1' : '0',
          padding: '10px 0',
          textAlign: 'center',
          flex: 1,
          minWidth: '100px',
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          cursor: 'pointer'
        }
      } onClick={() => { this.getNavId(val.id, index) }
      } key={val.id} > {val.title}</div >)
    })
  }
  // 拿到导航栏id
  getNavId = (e: number, index?: any) => {
    const { animation, count } = this.state
    let a = document.getElementById(count) as HTMLElement
    if (animation) {
      let teb = document.getElementById(String(count) + e) as HTMLElement
      const tebClientHeight = teb.clientHeight
      this.setState({
        tebClientHeight
      })

    }

    const clientWidth = a.clientWidth
    const clientHeight = a.clientHeight
    this.props.onAction(e)
    this.setState({
      navId: e,
      clientWidth,
      clientHeight,
    })
  }
  // 屏幕发生变化
  screenChange() {
    window.addEventListener('resize', this.resize);
    this.setState({
      windowHeight:window.innerHeight-100
    })
  }
  // 屏幕发生变化
  resize = () => {
    const { navId } = this.state
   
    this.getNavId(navId as number)
  }
  // 拿到导航栏中的内容
  getChildren = () => {
    const { children, navId, animation, count } = this.state
    if (animation) return children.map((val: any, index: number) => <div id={String(count) + index} key={index} style={{ flex: 'none', width: '100%' }}>{val}</div>)
    return children.map((val: any, index: number) => {
      return <div key={index}>{val.props.name === navId ? val : ''}</div>
    })
  }
}